<template>
  <div v-if="isshow" class="updatebox">
    <el-form
      :model="ruleForm"
      :rules="rules"
      ref="ruleForm"
      label-width="120px"
      class="demo-ruleForm"
    >
      <!-- 多项填空富文本 -->
      <el-form-item label="题目标题" prop="questionName">
        <wangEditor
          v-model="ruleForm.questionName"
          ref="quilleditor"
          placeholder="请输入题目..."
          isgetIndex="1"
          @change="getQuestionname($event)"
        ></wangEditor>
        <el-button
          type="primary"
          @click="insertfull"
          v-if="ruleForm.questionType == 3"
          style="margin-top: 20px"
          >插入填空符</el-button
        >
      </el-form-item>
      <el-form-item label="是否必答" prop="requiredFlag">
        <el-radio-group v-removeAriaHidden  v-model="ruleForm.requiredFlag">
          <el-radio :label="1">是</el-radio>
          <el-radio :label="0">否</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="填写提示" prop="questionDescription">
        <el-input v-model="ruleForm.questionDescription"></el-input>
      </el-form-item>
      <el-form-item label="题目类型" prop="questionType">
        <el-select
          v-model="ruleForm.questionType"
          placeholder="请选择"
          style="width: 100%"
          :disabled="select"
        >
          <el-option
            v-for="item in questionType"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <!-- 选择选设置 -->
      <el-form-item
        v-show="ruleForm.questionType === 1 || ruleForm.questionType === 2"
      >
        <el-row :gutter="24" style="background-color: #e8e8e8">
          <el-col :span="9"
            ><div class="grid-content bg-purple thead">选项文字</div></el-col
          >
          <el-col :span="5"
            ><div class="grid-content bg-purple thead">图片</div></el-col
          >

          <el-col :span="5"
            ><div class="grid-content bg-purple thead">允许填空</div></el-col
          >
          <el-col :span="5"
            ><div class="grid-content bg-purple thead">上移下移</div></el-col
          >
        </el-row>
        <el-row
          :gutter="24"
          v-for="(item, index) in ruleForm.optionList"
          :key="index"
        >
          <el-col :span="9"
            ><div class="grid-content bg-purple thead">
              <el-input
                v-model="item.optionName"
                placeholder="请输入选项内容"
                size="small"
              ></el-input>
              <i
                class="el-icon-circle-plus-outline icon_size"
                @click="additem(index)"
              ></i>
              <i
                class="el-icon-remove-outline icon_size"
                style="color: red"
                @click="deltips"
                v-if="
                  (select && !item.addDisable) ||
                  ruleForm.optionList.length == 1
                "
              ></i>
              <i
                class="el-icon-remove-outline icon_size"
                @click="delitem(index)"
                v-else
              ></i></div
          ></el-col>
          <el-col :span="5">
            <div class="grid-content bg-purple thead">
              <input
                class="uploadFile"
                type="file"
                ref="fileInput"
                @change="uploadFile($event.target)"
                accept=".jpg,.png"
              />
              <i
                class="el-icon-picture-outline icon_size iconimg"
                @click="checkimg(index)"
                v-if="!item.optionPicUrl"
              ></i>
              <div v-if="item.optionPicUrl" class="optionimg">
                <el-image
                  style="width: 20px; height: 20px"
                  :src="item.optionPicUrl"
                  :preview-src-list="[item.optionPicUrl]"
                >
                </el-image>
                <i
                  class="el-icon-remove optionimgdel"
                  @click="deloptionimg(index)"
                ></i>
              </div>
            </div>
          </el-col>
          <el-col :span="5"
            ><div class="grid-content bg-purple thead">
              <el-checkbox
                v-model="item.fillFlag"
                :true-label="1"
                :false-label="0"
              ></el-checkbox>
              <el-checkbox
                v-if="item.fillFlag == 1"
                v-model="item.requiredFlag"
                :true-label="1"
                :false-label="0"
                >必答</el-checkbox
              >
            </div></el-col
          >
          <el-col :span="5"
            ><div class="grid-content bg-purple thead">
              <i
                class="el-icon-top icon_size"
                @click="itemUp(index)"
                v-if="!select"
              ></i>
              <i
                class="el-icon-top icon_size"
                style="color: red"
                v-if="select"
              ></i>
              <i
                class="el-icon-bottom icon_size"
                @click="itemDown(index)"
                v-if="!select"
              ></i>
              <i
                class="el-icon-bottom icon_size"
                style="color: red"
                v-if="select"
              ></i></div
          ></el-col>
        </el-row>
      </el-form-item>
      <el-form-item
        ><el-button type="primary" @click="confirm" style="width: 100%"
          >完成编辑</el-button
        ></el-form-item
      >
    </el-form>
  </div>
</template>
<!-- TODO:选项是否填空填空是否必答 -->
<script>
import wangEditor from "@/components/wangEditor.vue";
import uploadImgOss from "@/components/uploadImgOss";
import { fammterString, uploadOSS } from "@/api/upload";

export default {
  name: "ProjectPopup",
  components: { uploadImgOss, wangEditor },
  data() {
    return {
      lookmsg: false,
      isshow: false,
      optionimg: "",
      ruleForm: {
        surveyId: "",
        questionType: "",
        questionName: "",
        questionDescription: "",
        questionSort: 0,
        questionPage: 0,
        requiredFlag: 0,
        questionNameList: [],
        id: 1,
        addDisable: false,
        optionList: [
          {
            surveyId: 0,
            questionId: 0,
            optionName: "",
            optionDescription: "",
            optionImg: "",
            optionSort: 0,
            requiredFlag: 0,
            fillFlag: 0,
            optionPicUrl: "",
          },

        ],
      },
      questionType: [
        {
          label: "单选题",
          value: 1,
        },
        {
          label: "多选题",
          value: 2,
        },
        {
          label: "填空",
          value: 3,
        },
        {
          label: "简答",
          value: 4,
        },
      ],

      // 是否必答
      isMust: true,
      file: "",
      imgindex: undefined,
      updateindex: undefined,
      rules: {
        questionName: [
          {
            required: true,
            message: "请输入题目标题",
            trigger: ["blur", "change"],
          },
        ],
        requiredFlag: [
          {
            required: true,
            message: "请选择是否必答",
            trigger: ["blur", "change"],
          },
        ],
        questionType: [
          {
            required: true,
            message: "请选择题目类型",
            trigger: ["blur", "change"],
          },
        ],
      },
      questiontext: "",
      editor: "",
      selectitemindex: "",
      select: undefined,
    };
  },
  created() {},

  methods: {
    // 打开
    show(val, select) {
      if (val) {
        this.select = select;
        this.ruleForm.questionName = val.questionName;
        console.log(val.questionName, "222222222222");
        this.ruleForm.requiredFlag = val.requiredFlag;
        this.ruleForm.questionDescription = val.questionDescription;
        this.ruleForm.optionList = val.optionList;
        this.ruleForm.questionType = val.questionType;
        this.ruleForm.surveyId = val.surveyId;
        this.ruleForm.questionSort = val.questionSort;
        this.ruleForm.questionPage = val.questionPage;
        this.ruleForm.id = val.id;
        this.updateindex = val.updateindex;
        this.ruleForm.addDisable = val.addDisable;
        // this.ruleForm.questionNameList = [];
      }
      this.isshow = true;
    },
    // 确定
    confirm() {
      let state = this.isquestionFull();
      if (state) {
        let data = JSON.parse(JSON.stringify(this.ruleForm));
        this.$emit("sendData", data, this.updateindex);
        this.close();
      }
    },
    // 校验
    isquestionFull() {
      let status = false;
      if (this.isshow) {
        this.$refs.ruleForm.validate((valid) => {
          if (valid) {
            status = true;
            // 校验单选多选
            if (
              (this.ruleForm.questionType === 1 ||
                this.ruleForm.questionType === 2) &&
              (this.ruleForm.optionList.length === 0 ||
                this.ruleForm.optionList.find((i) => i.optionName === ""))
            ) {
              this.$modal.msgError("选项不能为空");
              status = false;
            }
            if (
              this.ruleForm.questionType === 3 &&
              this.ruleForm.questionName.indexOf("_______") == -1
            ) {
              this.$modal.msgError("请插入填空符");
              status = false;
            }
          }
        });
      }

      return status;
    },
    // 插入选项
    additem(index) {
      let obj = {
        surveyId: this.ruleForm.surveyId,
        questionId: "",
        optionName: "",
        optionDescription: "",
        optionPicUrl: "",
        optionSort: 0,
        requiredFlag: 0,
        fillFlag: 0,
        addDisable: true,
      };
      this.ruleForm.optionList.splice(index + 1, 0, obj);

    },
    // 删除选项
    delitem(index) {
      this.ruleForm.optionList.splice(index, 1);
    },
    // 上移
    itemUp(index) {
      if (index > 0) {
        this.ruleForm.optionList.splice(
          index,
          1,
          ...this.ruleForm.optionList.splice(
            index - 1,
            1,
            this.ruleForm.optionList[index]
          )
        );
      }
    },
    // 下移
    itemDown(index) {
      if (index < this.ruleForm.optionList.length - 1) {
        this.ruleForm.optionList.splice(
          index,
          1,
          ...this.ruleForm.optionList.splice(
            index + 1,
            1,
            this.ruleForm.optionList[index]
          )
        );
      }
    },
    // 选项删除提示
    deltips() {
      this.$modal.msgError("选项不能删除");
    },
    close() {
      this.$refs.ruleForm.resetFields();
      this.isshow = false;
      this.ruleForm = {
        surveyId: 1,
        questionType: 1,
        questionName: "",
        questionDescription: "",
        questionSort: 0,
        questionPage: 0,
        requiredFlag: 0,

        optionList: [
          {
            surveyId: 0,
            questionId: 0,
            optionName: "",
            optionDescription: "",
            optionPicUrl: "",
            optionSort: 0,
          },
        ],
      };
    },
    // 获取光标
    insertfull() {
      this.$refs.quilleditor.wangEditor.cmd.do("insertText", "_______");
    },
    uploadFile(event) {
      const file = this.$refs.fileInput[0].files[0];
      if (!file) {
        return;
      }
      this.uploadFiles(event, file);
      event.value = "";
      // 进行上传操作
    },
    async uploadFiles(event, file) {
      let res;
      try {
        let path = fammterString(4, localStorage.getItem("uuid"));
        res = await uploadOSS(file, path);
      } catch (e) {}
      if (res) {
        let inse = true;
        this.ruleForm.optionList[this.imgindex].optionPicUrl = res[0];
        this.$forceUpdate();
        this.$emit("sendData", this.ruleForm, this.updateindex, inse);
      }
    },
    checkimg(index) {
      this.imgindex = index;
      const fileInput = this.$refs.fileInput[0];
      fileInput.click();
    },
    onImageAdded(file) {
      if (file) {
        this.file = file.html;
      }
    },
    getQuestionname(content) {
      // console.log(content,"--------------------content");
      let inse = true;
      let questionName = content;
      questionName=questionName.replace(/<img/gi,'<img style="width:100px;" ');
      if (this.ruleForm.questionType == 3) {
        this.ruleForm.questionNameList = questionName
          .split("_______")
          .map((i) => ({ name: i, value: "" }));
      }
      this.$set(this.ruleForm, "questionName", questionName);
      this.$emit("sendData", this.ruleForm, this.updateindex, inse);
    },
    // 删除选项图片
    deloptionimg(index) {
      let inse = true;
      this.ruleForm.optionList[index].optionPicUrl = "";
      this.$forceUpdate();
      this.$emit("sendData", this.ruleForm, this.updateindex, inse);
    },
  },
};
</script>

<style lang="scss" scoped>
::v-deep .w-e-text {
  min-height: 50px !important;
  height: auto !important;
  overflow-y: unset !important;
}

::v-deep .w-e-text-container {
  min-height: 50px !important;
  height: auto !important;
  z-index: 0 !important;
}

::v-deep .w-e-text img{
  margin: 0 !important;
}
.thead {
  display: flex;
  height: 40px;
  justify-content: center;
  align-items: center;
}
.icon_size {
  font-size: x-large;
  color: #a4adb3;
}
.selectType {
  margin: 15px 0;
}
.confirm {
  width: 100%;
  height: 100%;
  .confirm_btn {
    font-weight: bold;
    width: 100%;
    height: 100%;
    background-color: #4193f7;
  }
}
.updatebox {
  width: 1000px;
  background-color: #fafafa;
  border: 1px solid #dddddd;
  padding: 10px;
}
.uploadFile {
  // display: block;
  opacity: 0;
}
// 修改选项图片图标移位添加移入变化
.iconimg:hover {
  color: #4193f7;
}
// .ql-tooltip[data-mode="video"]::before {
//   content: "请输入视频地址:";
// }

.optionimg {
  position: relative;
  top: 5px;
}
.optionimgdelno {
  position: absolute;
  left: 15px;
  top: -5px;
  color: #dddddd;
}
.optionimgdel {
  color: red;
  position: absolute;
  left: 15px;
  top: -5px;
}
.custom-placeholder {
  background-color: blue;
  color: #000; /* 设置占位符字体颜色为灰色 */
  font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB,
    Microsoft YaHei, Arial, sans-serif; /* 设置占位符字体家族 */
  /* 可以根据需要添加其他样式属性 */
}

</style>
